<template>
	<!-- 魔方图 -->
	<view class="magiccube" :style="Style">

		<!-- 一行二个 -->
		<section class="buju" v-if="datas.rubiksCubeType == 0 && showimageList()"
			:class="datas.imageList[0].src.includes('铁仔') ? 'bujutiezai' : 'buju0'">
			
			<view v-for="index in 2" :key="index" class="rubiksCubeType"
				:class="datas.imageList[0].src.includes('铁仔') ? 'rubikstiezai' : 'rubiksCubeType0'"
				@click="click(index-1)" >
				<image :src="datas.imageList[index - 1].src" alt="" mode="widthFix" />
				<view v-if="datas.showTitle" class="title">
					{{ datas.imageList[index - 1].title }}
				</view>
			</view>
		</section>

		<!-- 一行三个 -->
		<section class="buju buju0" v-if="datas.rubiksCubeType == 1 && showimageList()">
			<view v-for="index in 3" :key="index" :class="datas.imageList[0].src.includes('职工书屋') ? 'heightStyleK' : ''"
				class="rubiksCubeType1 rubiksCubeType" @click="click(index-1)"
				:style="{margin: datas.imgMargin / 10 + '%'}">
				<!--    width: 33 - datas.imgMargin / 10 + '%', -->
				<image :class="datas.imageList[0].src.includes('职工书屋') ? 'heightStyle' : 'image'"
					:src="datas.imageList[index - 1].src" alt="" />
				<view v-if="datas.showTitle" class="title">
					{{ datas.imageList[index - 1].title }}
				</view>
			</view>
		</section>

		<!-- 一行四个 -->
		<section class="buju buju0" v-if="datas.rubiksCubeType == 2 && showimageList()">
			<view v-for="index in 4" :key="index" :class="datas.showTitle ? 'showTitle' : ''"
				class="rubiksCubeType2 rubiksCubeType" @click="click(index-1)" :style="{
          margin: datas.imgMargin / 10 + '%',
          width: 25 - datas.imgMargin / 10 + '%',
        }">
				<image :src="datas.imageList[index - 1].src" alt="" />
				<view v-if="datas.showTitle" class="title">
					{{ datas.imageList[index - 1].title }}
				</view>
			</view>
		</section>

		<!-- 二左二右 -->
		<section class="buju buju0" v-if="datas.rubiksCubeType == 3 && showimageList()">
			<view v-for="index in 4" :key="index" :class="datas.showTitle ? 'showTitle' : ''"
				class="rubiksCubeType3 rubiksCubeType" @click="click(index-1)">
				<image :src="datas.imageList[index - 1].src" alt="" :style="{ padding: datas.imgMargin + 'rpx' }" />
				<view v-if="datas.showTitle" class="title">
					{{ datas.imageList[index - 1].title }}
				</view>
			</view>
		</section>

		<!-- 一左二右 -->
		<section class="buju buju4" v-if="datas.rubiksCubeType === 4 && showimageList()">
			<view class="rubiksCubeType hw" :class="datas.showTitle ? 'showTitle' : ''" style="padding-top: 100%"
				@click="click(0)">
				<image :src="datas.imageList[0].src" alt="" style="height:200rpx"
					:style="{ 'padding-right': datas.imgMargin + 'rpx' }" />
				<view v-if="datas.showTitle" class="title">
					{{ datas.imageList[index - 1].title }}
				</view>
			</view>
			<view style="display: inline-flex; flex-direction: column; width: 100%">
				<view :class="datas.showTitle ? 'showTitle' : ''" class=" hw imgone" v-for="index in 2" :key="index"
					@click="click(index)" style="padding-top: 150rpx;height:100rpx">
					<image :src="datas.imageList[index].src" alt="" style="height:100rpx"
						:style="{ padding: datas.imgMargin + 'rpx'}" />
					<view v-if="datas.showTitle" class="title">
						{{ datas.imageList[index - 1].title }}
					</view>
				</view>
			</view>
		</section>

		<!-- 一上二下 -->
		<section class="buju buju5" v-if="datas.rubiksCubeType == 5 && showimageList()">
			<view class="rubiksCubeType hw" style="display: block; padding-top: 50%" @click="click(0)">
				<image :src="datas.imageList[0].src" alt="" :style="{ 'padding-bottom': datas.imgMargin + 'rpx' }" />
				<view v-if="datas.showTitle" class="title">
					{{ datas.imageList[index - 1].title }}
				</view>
			</view>
			<view style="display: flex; width: 100%">
				<view class="rubiksCubeType hw imgtow" @click="click(index)" v-for="index in 2" :key="index"
					style="padding-top: 50%">
					<image :src="datas.imageList[index].src" alt="" :style="{ padding: datas.imgMargin + 'rpx' }" />
					<view v-if="datas.showTitle" class="title">
						{{ datas.imageList[index - 1].title }}
					</view>
				</view>
			</view>
		</section>

		<!-- 魔方图 -->
		<!-- 一左四右 -->

		<view v-if="datas.rubiksCubeType == 6 && showimageList()">
			<!--  :indicator-dots="true" -->
			<swiper @change="swiper_change" :indicator-dots="false" style="height: 400rpx;" :autoplay="true"
				:interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item buju buju4">
						<view class="rubiksCubeType hw" style="width:40%" @click="click(swiper_index*5)">
							<image :src="datas.imageList[0].src" alt="" mode="aspectFill"
								style="height:400rpx; border-radius: 20rpx; margin-left: 2rpx;" />
						</view>
						<view style="display: inline-flex; width: 60%; flex-wrap: wrap;">
							<view v-for="index in 4" @click="click(swiper_index*5+index)"
								style="width: 50%; display: flex; justify-content: center; align-items: center; height: 200rpx;">
								<image :src="datas.imageList[index + 1].src" style="height:95%; width: 95%;border-radius: 20rpx; 
								margin: 0 0 0 13rpx;" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</swiper-item>
				<!-- <swiper-item v-if="datas.imageList[5].src!=''" >
					<view class="swiper-item buju buju4">
						<view class="rubiksCubeType hw" style="width:40%" @click="click(5)">
							<image :src="datas.imageList[5].src" alt="" mode="aspectFill"
								style="height:400rpx; border-radius: 20rpx; margin-left: 2rpx;" />
						</view>
						<view style="display: inline-flex; width: 60%; flex-wrap: wrap;">
						
							<view v-for="index in 4"
								style="width: 50%; display: flex; justify-content: center; align-items: center; height: 200rpx;">
								<image :src="datas.imageList[index+5 ].src" style="height:95%; width: 95%;border-radius: 20rpx; 
								margin: 0 0 0 13rpx;" mode="aspectFill"></image>
							</view>
							
						</view>
					</view>
				</swiper-item> -->
				<!-- <swiper-item v-if="datas.imageList[10].src!=''">
					<view class="swiper-item buju buju4">
						<view class="rubiksCubeType hw" style="width:40%" @click="click(10)">
							<image :src="datas.imageList[10].src" alt="" mode="aspectFill"
								style="height:400rpx; border-radius: 20rpx; margin-left: 2rpx;" />
						</view>
						<view style="display: inline-flex; width: 60%; flex-wrap: wrap;">
						
							<view v-for="index in 4"
								style="width: 50%; display: flex; justify-content: center; align-items: center; height: 200rpx;">
								<image :src="datas.imageList[index+10 ].src" style="height:95%; width: 95%;border-radius: 20rpx; 
								margin: 0 0 0 13rpx;" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</swiper-item> -->

			</swiper>

		</view>

		<!-- 	<section class="buju buju4" style="width: 665rpx; justify-content: space-between;"
			v-if="datas.rubiksCubeType == 6 && showimageList()">
			
			
			<view class="rubiksCubeType hw" style="width:49%" @click="click(0)">
				<image :src="datas.imageList[0].src" alt="" mode="aspectFill"
					style="height:400rpx; border-radius: 20rpx; margin-left: 2rpx;" />
			</view>
			
		
			<view style="display: inline-flex; width: 50%; flex-wrap: wrap;">

				<view v-for="index in 4"
					style="width: 50%; display: flex; justify-content: center; align-items: center; height: 200rpx;">
					<image :src="datas.imageList[index + 1].src" style="height:95%; width: 95%;border-radius: 20rpx; 
					margin: 0 0 0 13rpx;" mode="aspectFill"></image>
				</view>
				
			</view>
		</section> -->


	</view>
</template>

<script>
	export default {
		name: 'magiccube',
		props: {
			datas: {
				type: Object,
				default: () => {
					return {
						text: '魔方',
						rubiksCubeType: 0, // 魔方类型
						pageMargin: 0, //页面间距
						imgMargin: 0, //图片间隙
						imageList: [{
								src: '',
								linktype: '10',
								http: {},
							},
							{
								src: '',
								linktype: '10',
								http: {},
							},
							{
								src: '',
								linktype: '10',
								http: {},
							},
							{
								src: '',
								linktype: '10',
								http: {},
							},
							{
								src: '',
								linktype: '10',
								http: {},
							},
						], //图片列表}
					}
				},
			},
			computed: {
				aa() {
					return function() {
						return "aaaaa";
					}
				},
				IsimageList() {
					console.log("IsimageList");
					if (
						this.datas.rubiksCubeType === 0 &&
						!this.datas.imageList[0].src &&
						!this.datas.imageList[1].src
					)
						return false

					if (
						(this.datas.rubiksCubeType === 1 ||
							this.datas.rubiksCubeType === 4 ||
							this.datas.rubiksCubeType === 5) &&
						!this.datas.imageList[0].src &&
						!this.datas.imageList[1].src &&
						!this.datas.imageList[2].src
					)
						return false

					if (
						(this.datas.rubiksCubeType === 2 ||
							this.datas.rubiksCubeType === 6 ||
							this.datas.rubiksCubeType === 3) &&
						!this.datas.imageList[0].src &&
						!this.datas.imageList[1].src &&
						!this.datas.imageList[2].src &&
						!this.datas.imageList[3].src
					)
						return false

					return true
				},
			},

		},
		data() {
			return {
				Style: {},
				swiper_index: 0,
			}
		},
		created() {
			this.Style = this.get_style();
			console.log("魔方magiccube数据: ", this.datas);
		},
		methods: {
			swiper_change(e) {
				this.swiper_index = e.detail.current;
			},
			click(index) {
				// http://localhost:8889/#/survey?id=b1975c2f-8964-42f7-ac9c-0f91c55438d3&actId=64297c1f-921f-435d-98f2-fb5cad757b10&actType=5
				console.log('index: ', index);
				console.log('shuju: ', this.datas.imageList[index].http.externalLink);
				let str = this.datas.imageList[index].http.externalLink
				if (str) {
					if (str.includes("jf.boyaltd.cn")) {
						// console.log("字符串中包含 jf.boyaltd.cn");
						uni.showToast({
							title: '敬请期待',
							duration: 2000,
							icon: 'none'
						});
					} else {
						this.$emit("nav", {
							type: "magiccube",
							data: this.datas.imageList[index]
						});
					}
				} else {
					uni.showToast({
						title: '敬请期待',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			zijing() {
				var self = this
				console.log('ttsxAuthSign: ', self.ttsxAuthSign);
				let user = uni.getStorageSync('member')
				console.log('user: ', user);
				this.$common.request({
					url: "/service",
					data: {
						lg_id: user.lg_id
					},
				}, res => {
					let dizhi = res
					// console.log('dizhi：', dizhi);
					window.location.href = dizhi;
				});
			},
			get_style() {
				let style = this.datas;
				style["paddingLeft"] = this.datas.pageMargin + 'rpx';
				style["paddingRight"] = this.datas.pageMargin + 'rpx';
				return this.$comm.getCss(style);
			},
			showimageList() {
				console.log("showimageList");
				if (
					this.datas.rubiksCubeType === 0 &&
					!this.datas.imageList[0].src &&
					!this.datas.imageList[1].src
				)
					return false

				if (
					(this.datas.rubiksCubeType === 1 ||
						this.datas.rubiksCubeType === 4 ||
						this.datas.rubiksCubeType === 5) &&
					!this.datas.imageList[0].src &&
					!this.datas.imageList[1].src &&
					!this.datas.imageList[2].src
				)
					return false

				if (
					(this.datas.rubiksCubeType === 2 ||
						this.datas.rubiksCubeType === 6 ||
						this.datas.rubiksCubeType === 3) &&
					!this.datas.imageList[0].src &&
					!this.datas.imageList[1].src &&
					!this.datas.imageList[2].src &&
					!this.datas.imageList[3].src
				)
					return false

				return true
			},

		}
	}
</script>

<style scoped lang="less">
	.magiccube {
		// height: 395rpx;
		position: relative;

		// font-weight: bold;
		.showTitle {
			display: flex;
			flex-direction: column;
		}

		.title {
			background-color: white;
			width: 100%;
			text-align: center;
		}

		/* 布局 */
		.imgone {
			&:last-of-type {
				image {
					padding-bottom: 0 !important;
					padding-right: 0 !important;
				}
			}

			&:first-of-type {
				image {
					padding-top: 0 !important;
					padding-right: 0 !important;
				}
			}
		}

		.imgtow {
			&:first-of-type {
				image {
					padding-bottom: 0 !important;
					padding-left: 0 !important;
				}
			}

			&:last-of-type {
				image {
					padding-bottom: 0 !important;
					padding-right: 0 !important;
				}
			}
		}

		.hw {
			width: 100%;
			position: relative;

			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		.buju {
			&.buju0 {
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
			}

			&.bujutiezai {
				display: flex;
				justify-content: right;
				// flex-wrap: wrap;
			}

			&.buju4 {
				display: flex;
				width: 100%;
				height: 200rpx;
				flex-direction: row;
				justify-content: space-around;
			}

			.active {
				background: #e0edff;
				border: 1rpx solid #155bd4;
				color: #155bd4;
				z-index: 2;
			}

			.rubiksCubeType {
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;

				&.rubikstiezai {
					width: 110rpx;
				}

				&.rubiksCubeType0 {
					width: 320rpx;

					&:first-of-type {
						image {
							padding-left: 0 !important;
							padding-top: 0 !important;
							padding-bottom: 0 !important;
						}
					}

					&:last-of-type {
						image {
							padding-right: 0 !important;
							padding-top: 0 !important;
							padding-bottom: 0 !important;
						}
					}

					image {
						width: 100%;
						// height: 100rpx;
						display: block;
						// border-radius: 10rpx;
					}
				}

				&.rubiksCubeType1 {
					width: 30%;

					&:nth-of-type(1) {
						margin-left: 0 !important;
						margin-top: 0 !important;
						margin-bottom: 0 !important;
					}

					&:nth-of-type(2) {
						margin-top: 0 !important;
						margin-left: 0 !important;
						margin-bottom: 0 !important;
					}

					&:nth-of-type(3) {
						margin-top: 0 !important;
						margin-right: 0 !important;
						margin-bottom: 0 !important;
					}
				}

				&.rubiksCubeType2 {
					width: 25%;

					&:nth-of-type(1) {
						margin-left: 0 !important;
						margin-top: 0 !important;
						margin-bottom: 0 !important;
					}

					&:nth-of-type(2) {
						margin-top: 0 !important;
						margin-left: 0 !important;
						margin-bottom: 0 !important;
					}

					&:nth-of-type(3) {
						margin-top: 0 !important;
						margin-left: 0 !important;
						margin-bottom: 0 !important;
					}

					&:nth-of-type(4) {
						margin-top: 0 !important;
						margin-right: 0 !important;
						margin-bottom: 0 !important;
					}

					image {
						width: 100%;
						height: 100rpx;
						display: block;
					}
				}

				&.rubiksCubeType3 {
					width: 50%;
					padding-top: 50%;
					position: relative;

					&:nth-of-type(1) {
						image {
							padding-top: 0 !important;
							padding-left: 0 !important;
						}
					}

					&:nth-of-type(2) {
						image {
							padding-top: 0 !important;
							padding-right: 0 !important;
						}
					}

					&:nth-of-type(3) {
						image {
							padding-bottom: 0 !important;
							padding-left: 0 !important;
						}
					}

					&:nth-of-type(4) {
						image {
							padding-bottom: 0 !important;
							padding-right: 0 !important;
						}
					}

					image {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
				}

				&.rubiksCubeType4 {
					width: 187rpx;
					height: 100rpx;

					image {
						width: 100%;
						height: 100%;
						display: block;
					}
				}
			}
		}
	}

	.image {
		width: 100%;
		height: 190rpx;
		display: block;
	}

	.heightStyle {
		height: 260rpx;
		border-radius: 20rpx;
		box-shadow: 3rpx 5rpx 8rpx rgba(0, 0, 0, 0.2);
	}
</style>